<%@page import="main_com.pojo.LookFriendBean" %>
<%@page import="java.util.ArrayList" %>
<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息管理系统 -> 修改通讯录</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
        }

        h1 {
            color: #4A90E2;
            text-align: center;
            padding: 20px 0;
        }

        a {
            text-decoration: none; /* 去掉下划线 */
        }

        .container {
            max-width: 1000px;
            margin: 20px auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        /* 新增表格外层容器样式，用于表格整体居中 */
        .table-wrapper {
            text-align: center;
        }

        table {
            width: 80%; /* 适当调整表格宽度，可根据实际情况修改 */
            margin: 20px auto; /* 让表格在.table-wrapper内水平居中 */
            border-collapse: collapse;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            font-size: 14px;
            color: #888;
        }

        .footer a {
            color: #4A90E2;
            text-decoration: none;
        }

        .footer a:hover {
            text-decoration: underline;
        }

        td {
            padding: 12px;
            font-size: 16px;
        }

        input[type="text"], input[type="submit"], input[type="reset"] {
            width: 50%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        input[type="submit"], input[type="reset"] {
            width: auto;
            background-color: #4A90E2;
            color: white;
            cursor: pointer;
        }

        input[type="submit"]:hover, input[type="reset"]:hover {
            background-color: #357ABD;
        }

        .form-section {
            margin-bottom: 20px;
        }

        .form-section input {
            width: calc(100% - 24px);
        }

        .error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }

        .navigation {
            text-align: center;
            margin-top: 20px;
        }

        .navigation a {
            margin: 0 10px;
            font-size: 16px;
            text-decoration: none;
            color: #4A90E2;
        }

        .navigation a:hover {
            text-decoration: underline;
        }

        /* 新增按钮容器样式，用于按钮更好地并列居中 */
        .button-container {
            text-align: center;
            display: flex;
            justify-content: center;
            margin-top: 20px; /* 适当增加间距，可根据实际调整 */
        }
    </style>
    <script>
        function validateForm() {
            var phone = document.forms["updateForm"]["phone"].value;
            var email = document.forms["updateForm"]["email"].value;
            var workPlace = document.forms["updateForm"]["workPlace"].value;
            var place = document.forms["updateForm"]["place"].value;
            var qq = document.forms["updateForm"]["QQ"].value;

            if (phone == "" || email == "" || workPlace == "" || place == "" || qq == "") {
                alert("所有字段都不能为空！");
                return false;
            }

            var phoneRegex = /^[1][3-9][0-9]{9}$/;
            if (!phoneRegex.test(phone)) {
                alert("请输入正确的电话号码！");
                return false;
            }

            var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailRegex.test(email)) {
                alert("请输入有效的邮箱地址！");
                return false;
            }

            return true;
        }
    </script>
</head>
<body>
<h1>修改通讯录</h1>
<div class="container">
    <div class="navigation">
        <a href="http://localhost/LookFriendController/lookFriend">查看通讯录</a>
        <a href="http://localhost/friendManager/addFriend.jsp">增加联系人</a>
        <a href="#">修改联系人信息</a>
        <a href="http://localhost/friendManager/deleteFriend.jsp">删除联系人</a>
    </div>
    <hr>
    <form name="updateForm" action="http://localhost/UpdateFriendMessageController/updateFriendMessage" method="post"
          accept-charset="UTF-8" onsubmit="return validateForm()">
        <!-- 新增表格外层div -->
        <div class="table-wrapper">
            <table>
                <%
                    ArrayList friendslist2 = (ArrayList) session.getAttribute("friendslist2");
                    if (friendslist2 == null || friendslist2.isEmpty()) {
                        response.sendRedirect("http://localhost/friendManager/lookFriend.jsp");
                    } else {
                        for (int i = friendslist2.size() - 1; i >= 0; i--) {
                            LookFriendBean ff = (LookFriendBean) friendslist2.get(i);
                %>
                <tr>
                    <td class="form-section">用户姓名</td>
                    <td><%=ff.getName()%>
                    </td>
                </tr>
                <tr>
                    <td class="form-section">用户电话</td>
                    <td><%=ff.getPhone()%>
                    </td>
                </tr>

                <tr>
                    <td class="form-section">邮箱地址</td>
                    <td><input type="text" name="email" value="<%=ff.getEmail()%>"></td>
                </tr>
                <tr>
                    <td class="form-section">工作单位</td>
                    <td><input type="text" name="workPlace" value="<%=ff.getWorkPlace()%>"></td>
                </tr>
                <tr>
                    <td class="form-section">家庭住址</td>
                    <td><input type="text" name="place" value="<%=ff.getPlace()%>"></td>
                </tr>
                <tr>
                    <td class="form-section">用户QQ</td>
                    <td><input type="text" name="QQ" value="<%=ff.getQQ()%>"></td>
                </tr>
                <tr>
                    <td colspan="2" class="form-section" align="center">
                        <!-- 使用按钮容器包裹按钮，实现并列居中效果 -->
                        <div class="button-container">
                            <input type="submit" value="确 定">
                            <input type="reset" value="重 置">
                        </div>
                    </td>
                </tr>
                <%
                        }
                    }
                %>
            </table>
        </div>
    </form>
    <div class="footer">
        <p>© 2024 个人信息管理系统 | <a href="http://localhost/lookMessage/lookMessage.jsp">返回首页</a></p>
    </div>
</div>
</body>
</html>